<template>
    <div>
        <button @click="show = true">打开弹窗</button>
        <!-- 通过传送门,让样式比较好写,定位到body遮罩全场 -->
        <teleport to="body">
            <div v-if="show" class="mask">
                <div v-if="show" class="dialog">
                    <p>第一行文字</p>
                    <p>第二行文字</p>
                    <p>第三行文字</p>
                    <button @click="show = false">关闭</button>
                </div>
            </div>
        </teleport>

    </div>

</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<style scoped>
.mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: #ffe0b2;

}
</style>